import React, {Component} from 'react'
import {View, StyleSheet, Animated, SafeAreaView} from 'react-native'

export default class PopUp extends Component {
  constructor(props) {
    super(props);
    this.state = {fadeAnim: new Animated.Value(0)};
  }
  componentDidMount(){
    Animated.timing(
      this.state.fadeAnim,
      {toValue: this.props.show ? 1 : 0, duration: 300}
    ).start();
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    Animated.timing(
      this.state.fadeAnim,
      {toValue: this.props.show ? 1 : 0, duration: 300}
    ).start();
  }

  render() {
    const {fadeAnim} = this.state;
    return (
        <Animated.View style={{
          ...styles.sWrap,
          top: fadeAnim.interpolate({
            inputRange: [0 ,1],
            outputRange: ['110%', '0%']
          }),
          opacity: fadeAnim,
        }}>
          <SafeAreaView style={styles.sInner}>
            {this.props.children}
          </SafeAreaView>
        </Animated.View>
    )
  }
}

const styles = StyleSheet.create({
  sWrap: {
    position: 'absolute',
    height: '100%',
    width: '100%',
    left: 0,
  },
  sNone: {
    height: 40,
  },
  sInner: {
    flex: 1,
  },
})
